<template>
	<view>
		<!-- 民宿详情 -->
		<view class="swiperTop">
			<u-swiper :list="listPhoto" @change="e => currentNum = e.current" :autoplay="true" height="200"
				indicatorStyle="right: 20px" radius="0">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ listPhoto.length }}</text>
				</view>
			</u-swiper>
		</view>
		<!-- 酒店基础数据 -->
		<view class="homestayDetails">
			<view class="detailsTitle">{{homestayDetailsData.shopName}}</view>
			<!-- 		<view class="detailsLabel">
				<view class="labelItem" v-for="(item,index) in labelData" :key="index">
					{{item}}
				</view>
			</view> -->
			<view style="display: flex;align-items: center;gap: 20rpx;">
				<u-icon @click="getPhoto(111)" name="phone" color="#55d091"></u-icon>
				<span style="color: #666666;">{{homestayDetailsData.shopPhone}}</span>
			</view>
			<view class="detailsMap">
				<u-icon name="map" size="24" color="#55d091"></u-icon>
				<view class="detailsMapD">
					<p>{{homestayDetailsData.shopAddress}}</p>
					<!-- <p class="detailsMapDP">距您驾车870.1公里</p> -->
				</view>
				<view style="margin-left: auto;color: #55d091;margin-right: 20rpx;">
					导航
				</view>
			</view>
		</view>
		<!-- 套餐 -->
		<view class="setMenu">
			<view class="setMenuTitle">
				<view class="setMenuTitleT"></view>
				<view class="setMenuTitleS">套餐选择</view>
				<view class="setMenuTitleV"></view>
			</view>
			<view class="setMenuTime" @click="setTime">
				<view class="setMenuTimeItem">
					{{timeData[0]}}
					<span>入住</span>
				</view>
				<view class="setMenuTimeItem">
					{{timeData[timeData.length-1]}}
					<span>离店</span>
				</view>
				<view class="">
					{{timeData.length-1}}晚
				</view>
			</view>
			<view class="setMenuTotal">
				<view class="setMenuItem" v-for="(item,index) in isRoomTypes" :key="index">
					<view class="setMenuItemImg">
						<image class="logo" :src="item.roomPhoto[0]" @click="clickImg(item.roomPhoto)"></image>
						<view class="setMenuItemImgNum">
							{{item.roomPhoto.length}}
						</view>
					</view>
					<view class="setMenuItemTitle">
						<span>{{item.roomName}}</span>
						<span style="font-size: 26rpx;" v-html="item.roomDescription"></span>
						<view class="setMenuItemTitleB">
							￥<span>{{item.roomPrice}}</span>
							<view class="setMenuItemTitleBot">
								立即订购
							</view>
						</view>
					</view>
				</view>
				<view v-if="isTypes" class="setMenuB" @click="clickMore(false)">
					查看其他{{roomTypes.length - isRoomTypes.length}}个套餐<u-icon name="arrow-right"></u-icon>
				</view>
				<view v-else class="setMenuB" @click="clickMore(true)">
					查看其他套餐<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
		</view>
		<!-- 商品内容 -->
		<view class="setMenu productContent">
			<view class="setMenuTitle">
				<view class="setMenuTitleT"></view>
				<view class="setMenuTitleS">详情介绍</view>
				<view class="setMenuTitleV"></view>
			</view>
			<view class="productContentC">
				<span v-html="homestayDetailsData.storeDetails"></span>
			</view>
		</view>
		<!-- 购买须知 -->
		<view class="setMenu productContent">
			<view class="setMenuTitle">
				<view class="setMenuTitleT"></view>
				<view class="setMenuTitleS">购买须知</view>
				<view class="setMenuTitleV"></view>
			</view>
			<view class="productContentC">
				<span v-html="homestayDetailsData.storePurchaseInstructions"></span>
			</view>
		</view>
		<!-- 商家资质 -->
		<view class="qualifications" @click="clickZZ">
			<view class="qualificationsL">
				<img src="/static/zz.png" alt="" />
				<span>商家资质</span>
			</view>
			<u-icon class="qualificationsR" name="arrow-right"></u-icon>
		</view>
		<u-calendar startText="住店" endText="离店" confirmDisabledText="请选择离店日期" :show="show" :mode="mode"
			@confirm="confirmData" ref="calendar" @close="()=>show=false">
		</u-calendar>
	</view>
</template>

<script>
	import {
		hotelsDetails,
		qualifications
	} from '@/api/scenicSpotDetails.js'
	export default {
		data() {
			return {
				id: '',
				listPhoto: [],
				currentNum: 0,
				labelData: ['2006年开业', '2024年装修', '255间客房'],
				homestayDetailsData: [],
				roomTypes: [],
				isRoomTypes: [],
				isTypes: true,
				// 日期选择
				show: false,
				mode: 'range',
				timeData: [],
				par: {
					id: '',
					roomTime: []
				}
			};
		},
		async onLoad(options) {
			this.id = options.id;
			this.getTodayAndTomorrow()
			this.getData()
		},
		methods: {
			// 酒店资质图片
			async clickZZ() {
				let res = await qualifications(this.homestayDetailsData.shopId)
				if (res.code == 200) {
					wx.previewImage({
						urls: res.data.businessLicense.split(','), //接受的是一个数组，默认展示第一张
						current: "",
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					});
				}

			},
			// 获取当天和第二天日期
			getTodayAndTomorrow() {
				const today = new Date();
				const tomorrow = new Date(today);
				tomorrow.setDate(tomorrow.getDate() + 1); // 加一天

				// 格式化日期为 YYYY-MM-DD
				const formatDate = (date) => {
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}-${month}-${day}`;
				};
				this.timeData = [formatDate(today), formatDate(tomorrow)]
			},
			// 时间确认
			confirmData(e) {
				this.show = false
				this.timeData = e
				this.getData()
			},
			// 点击时间
			setTime() {
				this.show = true
			},
			// 点击加载更多
			clickMore(data) {
				this.isTypes = data
				if (data == true) {
					this.isRoomTypes = this.roomTypes.slice(0, 5)
				} else {
					this.isRoomTypes = this.roomTypes
				}
			},
			// 图标点击放大功能
			clickImg(url) {
				wx.previewImage({
					urls: url, //接受的是一个数组，默认展示第一张
					current: "",
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				});
			},
			// 唤起电话
			getPhoto(data) {
				uni.makePhoneCall({
					phoneNumber: data,
				});
			},
			async getData() {
				let par = {
					id: this.id,
					roomTime: [this.timeData[0], this.timeData[this.timeData.length - 1]]
				}
				let res = await hotelsDetails(par)
				if (res.code == 200) {
					this.homestayDetailsData = res.data
					this.listPhoto = res.data.shopPhoto
					this.roomTypes = res.data.roomTypes
					this.clickMore(true)
					console.log(res.data);
				}
			}
		}
	}
</script>

<style lang="scss">
	// 资质
	.qualifications {
		background-color: #ffffff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.qualificationsR {
			margin-left: auto;
		}

		.qualificationsL {
			display: flex;
			align-items: center;
			gap: 20rpx;

			span {
				font-size: 30rpx;
			}

			img {
				width: 30rpx;
				height: 40rpx;
			}
		}


	}

	// 详情介绍
	.productContent {
		padding-bottom: 30rpx !important;

		.productContentC {
			font-size: 26rpx;
			line-height: 50rpx;
		}
	}

	// 套餐
	.setMenu {
		padding: 0 20rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;

		.setMenuTime {
			width: 100%;
			border-radius: 20rpx;
			background-color: #ffffff;
			padding: 20rpx;
			box-shadow: -1px -1px 4px 1px rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.setMenuTimeItem {
				span {
					font-size: 24rpx;
				}
			}
		}

		.setMenuTotal {
			.setMenuB {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #666666;
				padding: 20rpx 0;
			}

			.setMenuItem {
				width: 100%;
				margin-bottom: 20rpx;
				display: flex;
				background-color: #ffffff;
				box-shadow: -1px -1px 4px 1px rgba(0, 0, 0, 0.1);
				padding: 20rpx;
				border-radius: 20rpx;
				gap: 20rpx;

				.setMenuItemTitle {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					width: 100%;

					.setMenuItemTitleB {
						font-size: 20rpx;
						color: red;
						display: flex;
						align-items: flex-end;
						justify-content: flex-end;

						.setMenuItemTitleBot {
							padding: 10rpx 20rpx;
							margin-left: 30rpx;
							background: linear-gradient(to right, #91ea5d, #00e0ef);
							color: #ffffff;
							font-size: 30rpx;
							border-radius: 20rpx;
						}

						span {
							font-size: 36rpx;
						}
					}
				}

				.setMenuItemImg {
					min-height: 180rpx;
					position: relative;

					.setMenuItemImgNum {
						bottom: 5rpx;
						left: 10rpx;
						font-size: 22rpx;
						position: absolute;
						color: #ffffff;
					}

					.logo {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 180rpx;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}

		.setMenuTitle {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40rpx 0;

			.setMenuTitleV {
				padding: 8rpx;
				background: linear-gradient(to bottom, #bde1a8, #63ced5);
				margin-left: 10rpx;

			}

			.setMenuTitleS {
				background-color: #ffffff;
				margin-left: -40rpx;
			}

			.setMenuTitleT {
				width: 60rpx;
				height: 100rpx;
				border: 2px solid transparent;
				border-image: linear-gradient(45deg, #bde1a8, #63ced5) 1;
			}
		}
	}

	// 酒店基础数据
	.homestayDetails {
		width: 100%;
		background-color: #ffffff;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.detailsMap {
			width: calc(100% - 20rpx);
			padding: 20rpx 10rpx;
			display: flex;
			align-items: center;
			background-color: #ecf9f6;
			border-radius: 10rpx;
			margin-top: 10rpx;
			gap: 10rpx;

			.detailsMapD {
				width: 50%;
				font-size: 26rpx;

				.detailsMapDP {
					margin-top: 10rpx;
					color: #666666;
				}
			}
		}

		.detailsLabel {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-bottom: 20rpx;

			.labelItem {
				background-color: #ecf9f6;
				color: #55d091;
				padding: 5rpx 10rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
			}
		}

		.detailsTitle {
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
	}

	// 轮播图
	.swiperTop {
		.indicator-num {
			.indicator-num__text {
				color: #ffffff;
			}
		}
	}

	page {
		background: #f5f5f5;
	}
</style>